<template>
  <el-dialog v-model="isShow" :style="calcStyle" :title="title" :width="width" :fullscreen="fullscreen"
             append-to-body
             :draggable="draggable"
             :close-on-click-modal="closeOnClickModal"
             :close-on-press-escape="closeOnPressEscape"
             :show-close="showClose"
             :modal="modal"
             @close="_onClosed"
             @opened="_onOpened">
    <template v-for="(item,itemIdx) in bodyItems" :key="itemIdx">
      <component :is="getRuntimeCmp(item)"
                 :vjson="item"
                 :vcxt="vcxt"
                 :dialog-scope="this"
                 :parent-list="vjson.items"
                 :index-of-parent-list="itemIdx"
                 :parent-component="vjson"/>
    </template>
    <template #footer v-if="!!footerItem">
      <component :is="getRuntimeCmp(footerItem)"
                 :vjson="footerItem"
                 :vcxt="vcxt"
                 :dialog-scope="this"/>
    </template>
    <template #header v-if="!!headerItem">
      <component :is="getRuntimeCmp(headerItem)"
                 :vjson="headerItem"
                 :vcxt="vcxt"
                 :dialog-scope="this"/>
    </template>
  </el-dialog>
</template>

<script>
import _ from 'lodash'
import {Dialog} from '../../Defaults'
import WebVjsonMix from "../WebVjsonMix"

export default {
  mixins: [WebVjsonMix],
  data() {
    if (vjson.reference) {

      const vjson = _.defaults(this.vjson, Dialog)
      _.set(this.vcxt.scope, vjson.reference, {
        isShow: vjson.isShow,
        title: vjson.title,
        width: vjson.width,
        fullscreen: vjson.fullscreen,
      })
    }

    // 获取除了头部定义和尾部定义的所有组件
    const bodyItems = _.filter(this.vjson.items, item => !item.reference || (item.reference !== this.vjson.footerReference && item.reference !== this.vjson.headerReference))
    const footerItem = _.find(this.vjson.items, item => item.reference === this.vjson.footerReference)
    const headerItem = _.find(this.vjson.items, item => item.reference === this.vjson.headerReference)

    return {
      draggable: vjson.draggable,
      closeOnClickModal: vjson.closeOnClickModal,
      closeOnPressEscape: vjson.closeOnPressEscape,
      showClose: vjson.showClose,
      modal: vjson.modal,
      _innerIsShow: vjson.isShow,
      _innerIsLoading: vjson.loading,
      _innerTitle: vjson.title,
      _innerWidth: vjson.width,
      _innerFullscreen: vjson.fullscreen,
      _isOk: false, // 是否点击了确定
      _onOK: undefined, // 确定时的回调
      _onCancel: undefined, // 取消时的回调
      rowType: undefined, // 打开模式 add/edit/view
      row: undefined, // 初始化默认值
      bodyItems,
      footerItem,
      headerItem,
    }
  },
  computed: {
    isLoading: {
      set(newVal) {
        if (this.vjson.reference) {
          return _.set(this.vcxt.scope, this.vjson.reference + '.loading', newVal)
        }
        this._innerIsLoading = newVal
      },
      get() {
        if (this.vjson.reference) {
          return _.get(this.vcxt.scope, this.vjson.reference + '.loading', false)
        }
        return this._innerIsLoading
      }
    },
    isShow: {
      set(newVal) {
        if (this.vjson.reference) {
          return _.set(this.vcxt.scope, this.vjson.reference + '.isShow', newVal)
        }
        this._innerIsShow = newVal
      },
      get() {
        if (this.vjson.reference) {
          return _.get(this.vcxt.scope, this.vjson.reference + '.isShow', false)
        }
        return this._innerIsShow
      }
    },
    title: {
      set(newVal) {
        if (this.vjson.reference) {
          return _.set(this.vcxt.scope, this.vjson.reference + '.title', newVal)
        }
        this._innerTitle = newVal
      },
      get() {
        if (this.vjson.reference) {
          return _.get(this.vcxt.scope, this.vjson.reference + '.title', false)
        }
        return this._innerTitle
      }
    },
    width: {
      set(newVal) {
        if (this.vjson.reference) {
          return _.set(this.vcxt.scope, this.vjson.reference + '.width', newVal)
        }
        this._innerWidth = newVal
      },
      get() {
        if (this.vjson.reference) {
          return _.get(this.vcxt.scope, this.vjson.reference + '.width', false)
        }
        return this._innerWidth
      }
    },
    fullscreen: {
      set(newVal) {
        if (this.vjson.reference) {
          return _.set(this.vcxt.scope, this.vjson.reference + '.fullscreen', newVal)
        }
        this._innerFullscreen = newVal
      },
      get() {
        if (this.vjson.reference) {
          return _.get(this.vcxt.scope, this.vjson.reference + '.fullscreen', false)
        }
        return this._innerFullscreen
      }
    }
  },
  methods: {
    show(param) {
      this.isShow = true
      this._onOK = param?._onOK
      this._onCancel = param?._onCancel
      this.rowType = param?.rowType
      this.row = param?.row
      if (typeof param?.title === 'string') {
        this.title = param.title
      }
    },
    ok(data) {
      this._isOk = true
      this.close()
      if (typeof this._onOK === 'function') {
        this.$nextTick(() => {
          this._onOK({
            ...this.row,
            data
          })
        })
      }
    },
    close() {
      this.isShow = false
    },
    _onClosed() {
      this.runEvent('closed', ...arguments)
      if (!this._isOk && typeof this._onCancel === 'function') {
        this.$nextTick(() => {
          this._onCancel()
        })
      }
    },
    _onOpened(evt) {
      this._isOk = false
      window['cw'] = this

      const vjson = this.vjson
      if (vjson.reference) {
        _.set(this.vcxt.scope, vjson.reference + '.row', this.row)
      }
      this.runEvent('opened', ...arguments)
    }
  }
}
</script>